<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader :list='showList' @addTask="addTaskHandler"></TodoHeader>
    <TodoMain @delTask="delTaskHandler" :list='showList'></TodoMain>
    <TodoFooter @clearDone="clearDoneHandler" @changeTask='changeTaskHandler' :list='showList'></TodoFooter>
  </section>
</template>

<script>
// 渲染列表
// 在app.vue中声明list，并传递子组件TodoMain.vue
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
   data() {
    return {
      list: JSON.parse(localStorage.getItem('list')||'[]'),
      isSel:'all'
    };
  },
  watch:{
    list:{
      deep: true,
    handler(){
      localStorage.setItem('list',JSON.stringify(this.list))
    }
    }
  },
  methods:{
    addTaskHandler(taskName){
      let id=this.list.length>0?this.list[this.list.length-1].id+1:100
      this.list.push({id,name:taskName,isDone:false})
    },
    delTaskHandler(id){
     this.list=this.list.filter(ele=>ele.id!=id)
    },
    changeTaskHandler(isSel){
      this.isSel=isSel
    },
    clearDoneHandler(){
      this.list=this.list.filter(ele=>!ele.isDone)
    }
  },
  computed:{
    showList(){
      if(this.isSel==='no'){
        return this.list.filter(ele=>ele.isDone!=true)
      }else if(this.isSel==='yes'){
        return this.list.filter(ele=>ele.isDone!=false)
      }else{
        return this.list
      }
    }
  }
};
</script>